<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="res/style.css">
    <title></title>
</head>
<body class="fill-parent" dg-chart-auto-resize="true"
      dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
      dg-chart-theme="{color:'#F0F0F0',actualBackgroundColor:'#000c3b'}">
<div class="head">
    <div class="title">
        <div class="title-left"></div>
        <div class="title-value"><label>大棚数据看板</label></div>
        <div class="title-right"></div>
    </div>
</div>
<div class="content">
    <div class="layout layout-left-top">
        <div class="panel">
            <div class="title"><label>大棚信息</label></div>
            <div class="chart" dg-chart-widget="" style="text-align:center">
                <div style="margin:5%">大棚名称:<span id="name"></span></div>
                <div style="margin:5%">大棚编号:<span id="boxNo"></span></div>
                <div style="margin:5%">大棚地址:<span id="address"></span></div>
                <div style="margin:5%">大棚面积:<span id="area"></span></div>
                <div style="margin:5%">传感器设备数量:8</div>
                <div style="margin:5%">摄像头数量:4</div>
            </div>
        </div>
    </div>
    <div class="layout layout-left-center">
        <div class="panel">
            <div class="title"><label>土壤实时数据</label></div>
            <div class="chart" dg-chart-widget="" style="text-align:center" id="soilList">

            </div>
        </div>
    </div>
    <div class="layout layout-left-bottom">
        <div class="panel">
            <div class="title"><label>土壤含量饼状图</label></div>
            <div class="chart" dg-chart-widget="" id="pie" style="text-align:center">

            </div>
        </div>
    </div>
    <div class="layout layout-center-top">
        <div class="panel">
            <div class="chart chart-left" dg-chart-widget="">
                <img style="width:100%;height:100%" id="monitorImg1"
                     src="https://fastdfs-gateway.ys7.com/2f7a/1/capture/003q1yB9uEdOFZ4u9zBPbnQ47zm1Eh3.jpg?Expires=1735372644&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=iz6v1SZDF%2BZ%2BHXWSiTpxOzV1dc8%3D"/>
            </div>
            <div class="chart chart-center" dg-chart-widget="">
                <img style="width:100%;height:100%" id="monitorImg2"
                     src="https://fastdfs-gateway.ys7.com/fd42/1/capture/003q1yB2r56gpjA8drFXquiryaPmzT4.jpg?Expires=1735372640&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=XJcxSO39bO1ErJu00bQnJVqXhfQ%3D"/>
            </div>
            <div class="chart chart-right" dg-chart-widget="">
                <img style="width:100%;height:100%" id="monitorImg3"
                     src="https://fastdfs-gateway.ys7.com/873d/1/capture/003q1yB6JC9nqJBcdupoYyIaj6c75Bu.jpg?Expires=1735372642&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=j5cbTRmAlZ7O4KAwev3qY5FLv7U%3D"/>
            </div>
        </div>
    </div>
    <div class="layout layout-center-bottom">
        <div class="panel border-all">
            <div class="chart" dg-chart-widget="">
                <img style="width:100%;height:100%" id="monitorImg4"
                     src="https://fastdfs-gateway.ys7.com/e4ac/1/capture/003q1yAzIs6fBohzpVGGzWroozz6KT3.jpg?Expires=1735372639&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=U6rKlMOmLCEwf5bguNdgamTSAaI%3D"/>
            </div>
            <div class="border-foot"></div>
        </div>
    </div>
    <div class="layout layout-right-top">
        <div class="panel">
            <div class="title"><label>土壤湿度折线图</label></div>
            <div class="chart" dg-chart-widget="" id="zxt" style="text-align:center"></div>
        </div>
    </div>
    <div class="layout layout-right-center">
        <div class="panel">
            <div class="title"><label>空气温度柱状图</label></div>
            <div class="chart" dg-chart-widget="" id="zzt" style="text-align:center"></div>
        </div>
    </div>
    <div class="layout layout-right-bottom">
        <div class="panel">
            <div class="title"><label>土壤含水率折线图</label></div>
            <div class="chart" dg-chart-widget="" id="last" style="text-align:center"></div>
        </div>
    </div>
</div>
</body>
<script src="js/echarts.all.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>

    $(function () {
        init();
    })

    function init() {
        $.ajax({
            url: "greenhouse/getHomeData",
            data: {},
            dataType: "json",
            type: "get",
            success: function (data) {
                console.log(data)
                console.log(data.greenhouse)
                if (data.greenhouse != null) {
                    $("#address").text(data.greenhouse.address);
                    $("#area").text(data.greenhouse.area);
                    $("#boxNo").text(data.greenhouse.boxNo);
                    $("#name").text(data.greenhouse.name);
                }

                if (data.soilList != null){
                    var strJoin="";
                    $(data.soilList).each(function (i,e){
                        strJoin+='<div style="margin:2%">'+e.name+':'+e.value+'</div>';
                    })
                    $("#soilList").append(strJoin);
                }

                if (data.monitorList != null){
                    $("#monitorImg1").attr("src",data.monitorList[0].imagesUrl);
                    $("#monitorImg2").attr("src",data.monitorList[1].imagesUrl);
                    $("#monitorImg3").attr("src",data.monitorList[2].imagesUrl);
                    $("#monitorImg4").attr("src",data.monitorList[3].imagesUrl);
                }

                ecahtsData(data.dateWeekList,data.trDataList,data.kqDataList,data.hslDataList,data.zztDataList);
            }
        });
    }

    function ecahtsData(dates,trDataList,kqDataList,hslDataList,zztDataList){
        var myChart = echarts.init(document.getElementById('pie'));
        var option = {
            title: {
                text: '土壤含量',
                subtext: '最新数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: { //图例文字的样式
                    color: '#fff',
                    fontSize: 12
                }
            },
            series: [{
                name: 'mg/kg',
                type: 'pie',
                radius: '50%',
                data: zztDataList,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        myChart.setOption(option);

        var zxtCharts = echarts.init(document.getElementById('zxt'));
        var xDataArr = dates //x轴数据
        var yDataArr = trDataList //y轴数据
        var zxtOption = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '土壤湿度',
                data: yDataArr,
                type: 'line',
                smooth: true, // 是否为平滑线
                lineStyle: { // 线的样式设置
                    color: 'green',
                    type: 'solid' // dashed dotted solid
                },
                areaStyle: { // 线和x轴形成的区域设置
                    color: 'pink'
                }
            }]
        }
        zxtCharts.setOption(zxtOption);


        var zztCharts = echarts.init(document.getElementById('zzt'));
        var zztOption = {
            xAxis: {
                type: 'category',
                data: dates
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: zztDataList,
                type: 'bar'
            }]
        };
        zztCharts.setOption(zztOption);

        var lastCharts = echarts.init(document.getElementById('last'));
        var lastOption = {
            xAxis: {
                type: 'category',
                data: dates
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: hslDataList,
                type: 'line'
            }]
        };

        lastCharts.setOption(lastOption);
    }
</script>
<script>
</script>
</html>